<!--
 * @Description: 用户足迹页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-14 22:48:04
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-19 22:16:08
 -->
<template>
  <div>
    <el-button type="primary" icon="el-icon-info" circle style="width:110px;height:110px;margin-left: 16px;position: fixed;right: 0;top: 100px;" @click="drawerClick" >
      用户足迹
    </el-button>

    <el-drawer
      :visible.sync="drawer"
      :show-close="true"
      :custom-class="'custom-drawer'"
      title="用户足迹"
      size="70%"
    >
      <div slot="title">用户足迹信息</div>
      <div :style="'height:' + height + ';overflow-y:scroll;'" class="topnav_box">
        <div :style="'width:45%;padding:20px;'" class="fl">
          <div style="font-size:22px;font-weight:500;">{{ name }}</div>
          <div style="line-height:25px;margin:8px 0;">
            进程：1天 &nbsp; &nbsp; 已有健康币：{{ totalScore }}个<br>
          </div>
          <div class="el-divider el-divider--horizontal" style="margin: 0 0 10px;" />
          基本信息 &nbsp; &nbsp; 
          <el-button v-if="!baseUpdate" type="success" size="mini" class="el-icon-edit el-button-mini-5-12" @click="baseUpdate = true"> 修改</el-button>
          <el-button v-else type="primary" size="mini" class="el-icon-plus el-button-mini-5-12" @click="baseInfoSave"> 保存</el-button>
          <el-form class="custom-form">
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-input v-model="marketing.testing_data.base_info.sex" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="年龄">
                  <el-input v-model="marketing.testing_data.base_info.age" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="身高">
                  <el-input v-model="marketing.testing_data.base_info.height" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="体重">
                  <el-input v-model="marketing.testing_data.base_info.weight" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="地区">
                  <el-input v-model="marketing.testing_data.base_info.origin" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="婚恋">
                  <el-input v-model="marketing.testing_data.base_info.marital_status" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="孩子">
                  <el-input v-model="marketing.testing_data.base_info.family_children" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="学历">
                  <el-input v-model="marketing.testing_data.base_info.education" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="职业">
                  <el-input v-model="marketing.testing_data.base_info.occupation" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="目标">
                  <el-input v-model="marketing.testing_data.base_info.current_goal" :readonly="!baseUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- <el-divider /> -->
          特殊情况 &nbsp; &nbsp; 
          <el-button v-if="!specialUpdate" type="success" size="mini" class="el-icon-edit el-button-mini-5-12" @click="specialUpdate = true"> 修改</el-button>
          <el-button v-else type="primary" size="mini" class="el-icon-plus el-button-mini-5-12" @click="specialInfoSave"> 保存</el-button>
          
          <el-form class="custom-form">
            <el-row>
              <el-col :span="12">
                <el-form-item label="减肥原因">
                  <el-input v-model="marketing.testing_data.special_info.lose_weight_reason" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="期待时间">
                  <el-input v-model="marketing.testing_data.special_info.current_time" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="家人支持">
                  <el-input v-model="marketing.testing_data.special_info.family_support" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="预算">
                  <el-input v-model="marketing.testing_data.special_info.budget" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="运动习惯">
                  <el-input v-model="marketing.testing_data.special_info.exercise_frequency" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="曾经减肥">
                  <el-input v-model="marketing.testing_data.special_info.lose_weight_ways" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="知识来源">
                  <el-input v-model="marketing.testing_data.special_info.knowledge_sources" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="采购食材">
                  <el-input v-model="marketing.testing_data.special_info.purchase_ingredients" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="应酬次数">
                  <el-input v-model="marketing.testing_data.special_info.social_activities" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="早餐">
                  <el-input v-model="marketing.testing_data.special_info.three_meals.breakfast" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="午餐">
                  <el-input v-model="marketing.testing_data.special_info.three_meals.lunch" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>
                <el-form-item label="晚餐">
                  <el-input v-model="marketing.testing_data.special_info.three_meals.dinner" :readonly="!specialUpdate" size="small" placeholder="采集项" style="width: 92%" />
                </el-form-item>                                
              </el-col>
            </el-row>
            <el-form-item label="异常项">
              <el-input v-model="marketing.testing_data.special_info.except_item" :rows="5" :readonly="!specialUpdate" type="textarea" size="small" placeholder="采集项" style="width: 96%" />
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="fl" :style="'width:1px;height:' + maxHeight + ';border-right: 1px solid #ccc;'" /> -->
        <div :style="'width:55%;padding:20px;'" class="fl custom-tab">
          <el-tabs v-model="activeName" tab-position="left">
            <el-tab-pane label="客户跟进" name="first">
              <el-button slot="label" type="primary" style="line-height:18px;padding:3px 6px;">
                客<br>
                户<br>
                跟<br>
                进
              </el-button>
              <div style="height:260px;border: 1px solid #ccc" />
              <div class="empty-10" />
              <el-input v-model="contactForm.content" :rows="5" type="textarea" />
              <div class="empty-5" />
              <el-date-picker v-model="contactForm.date" size="small" type="datetime" style="width:100%" />
              <div class="empty-5" />
              <div>
                <el-button type="primary" size="small" @click="addContact">添加联系事件</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="行动总览" name="second">
              <el-button slot="label" type="success" style="line-height:18px;padding:3px 6px;">
                行<br>
                动<br>
                总<br>
                览
              </el-button>
              <div>
                <el-radio-group v-model="radioValue" size="mini" @change="handleRadioChange">
                  <el-radio-button label="all">全部内容</el-radio-button>
                  <el-radio-button label="nutri">营养师小笔记</el-radio-button>
                  <el-radio-button label="user">用户足迹</el-radio-button>
                </el-radio-group>
                <el-button size="mini" type="success" class="fr" @click="showDialog('', 'add')"> 添加小笔记 </el-button>
                <div class="empty-10" />
                <el-timeline :style="'height:' + height + ';overflow-y:scroll;padding:10px'" class="topnav_box">
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :type="activity.style_type"
                    :color="activity.color"
                  >
                    <div style="font-size:12px;color:#ccc">
                      <el-button :type="activity.style_type" class="el-button-mini-2-5" size="mini">{{ activity.mark }}</el-button> &nbsp; &nbsp;  {{ activity.timestamp }} &nbsp; &nbsp; <i v-if="+activity.type === 2" class="el-icon-edit" @click="showDialog(activity, 'update')" />
                    </div>
                    <div style="padding:5px;" v-html="activity.content" />
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-drawer>
    <el-dialog :visible.sync="dialogShow" title="添加笔记信息">
      <el-form>
        <div style="width:80%;margin: 0 auto;">
          <NewEditor ref="simditor" :simditor="footmarkForm.content" :style="'width:100%;'" editor-class-name="simditor-editor-answer" @update-simditor="handleUpdate" />
        </div>
        <el-form-item label="是否需要提醒">
          <el-switch v-model="footmarkForm.status" active-color="#13ce66" inactive-color="#ff4949" active-value="0" inactive-value="1" active-text="需要提醒" inactive-text="不需要" />
        </el-form-item>
        <el-form-item v-if="+footmarkForm.status === 0" label="提醒时间">
          <el-date-picker v-model="footmarkForm.remind_time" type="datetime" placeholder="选择提醒时间" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="saveNutriFeedback">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NewEditor from "@/views/components/simditor"

export default {
  components: {
    NewEditor
  },
  props: {
    serviceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      name: '',
      totalScore: 0,
      drawer: false,
      height: '50%',
      maxHeight: '0',
      radioValue: 'all',
      content: '',
      dialogShow: true,
      baseUpdate: false,
      specialUpdate: false,
      activeName: 'second',
      formTextContent: '',
      marketing: {
        testing_data: {
          base_info: {},
          special_info: {
            three_meals: {}
          }
        },
      },
      activities: [],
      footmarkData: {
        all: [],
        nutri: [],
        user: []
      },
      footmarkForm: {
        id: '',
        service_id: '',
        content: '',
        status: '1',
        remind_time: ''
      },
      contactForm: {
        datetime: '',
        content: ''
      }
    }
  },
  created() {
    this.height = (window.screen.height - 200) + 'px'
    this.dialogShow = false
  },
  methods: {
    drawerClick() {
      this.initData()
    },
    initData() {
      //获取测评的初始信息
      this.$api.order.marketing
        .info(this.serviceId)
        .then(res => {
          this.name = res.data.name
          this.totalScore = res.data.total_score
          this.marketing = res.data.marketing
        }).catch(err => {
          console.log(err)
        })
      
      this._initFootmark()
    },
    handleRadioChange(val) {
      this.activities = this.footmarkData[val]
    },
    handleUpdate(val) {
      this.formTextContent = val
    },
    showDialog(activity, type) {
      this.dialogShow = true
      if (type === 'add') {
        this.footmarkForm = {
          id: '',
          service_id: this.serviceId,
          remind_time: '',
          status: '1',
          content: '',
        }
      } else {
        this.footmarkForm.id = activity.id
        this.footmarkForm.content = activity.content
        this.footmarkForm.remind_time = activity.remind_time
        this.footmarkForm.status = activity.status.toString()
        this.footmarkForm.service_id = this.serviceId
      }
    },
    baseInfoSave() {
      this.baseUpdate = false
    },
    specialInfoSave() {
      this.specialUpdate = false
    },
    saveNutriFeedback() {
      this.footmarkForm.content = this.formTextContent
      this.$api.user.footmark
        .add({
          data: this.footmarkForm
        })
        .then(res => {
          this.$notify({ title: '成功', message: '保存足迹信息成功', type: 'success', duration: 2500 })
          this.dialogShow = false
          this._initFootmark()
        }).catch(err => {
          console.log(err)
        })
    },
    addContact() {
      
    },
    _initFootmark() {
      //获取足迹信息
      this.$api.user.footmark
        .service(this.serviceId)
        .then(res => {
          this.footmarkData = res.data
          this.activities = this.footmarkData[this.radioValue]
          this.drawer = true
        }).catch(err => {
          this.drawer = false
          console.log(err)
        })
    }
  }
}
</script>

<style>
.custom-drawer .el-drawer__header {
  padding: 10px 20px;
  margin-bottom: 2px;
  border: 1px solid aliceblue;
}
.custom-tab .el-tabs--left .el-tabs__item.is-left {
  text-align: right !important;
  height: 80px !important;
  line-height: 16px !important;
  padding: 0 !important;
}
.custom-tab ul {
  padding: 0 10px 0;
}
.custom-form .el-form-item__label {
  line-height: 26px !important;
  font-weight: 500 !important;
  font-size: 13px;
}
.custom-form .el-form-item {
  margin-bottom: 10px !important;
}
</style>
